<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 审核实习经历 -->
    <div
      class="ml-20"
      style="transform: translateY(16px); min-width: 1080px"
    >
      <div
        ref="contentDiv"
        class="bg-white rounded-lg shadow-sm p-6"
        style="min-width: 81vw; margin-left: 20vw; height: 96vh"
      >
        <!-- 状态筛选 -->
        <div class="flex gap-4 mb-6">
          <button
            v-for="tab in tabs"
            :key="tab.value"
            @click="handleTabClick(tab)"
            :class="{
              'bg-blue-500 text-white': currentTab === tab.value,
              'bg-gray-100 text-gray-600': currentTab !== tab.value,
              'rounded-md': true,
            }"
            class="px-4 py-2 text-sm font-medium whitespace-nowrap"
          >
            {{ tab.label }}
          </button>
        </div>
        <!-- 表格 -->
        <div class="overflow-x-auto table-container" style="max-height: 500px; overflow-y: auto;">
          <table class="min-w-full">
            <thead class="bg-gray-50 sticky top-0 z-10">
              <tr>
                <th
                  v-for="header in tableHeaders"
                  :key="header"
                  class="py-3.5 px-4 text-left text-sm font-medium text-gray-900"
                >
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr v-for="data in allSpecial" :key="data.itemName">
                <td class="py-4 px-4 text-sm text-gray-900">
                  {{ data.name }}
                </td>
                <td class="py-4 px-4 text-sm text-gray-600">
                  {{ data.type }}
                </td>
                <td class="py-4 px-4 text-sm text-gray-600">
                  <span  v-if="data.severity == 0" class="text-green-600">正常</span>
                  <span v-else-if="data.severity == 1" class="text-yellow-600">轻微</span>
                  <span v-else-if="data.severity == 2" class="text-orange-600">中度</span>
                  <span v-else-if="data.severity == 3" class="text-red-600">严重</span>
                </td>
                <td class="py-4 px-4">
                  <div class="flex items-center gap-3">
                    <template v-if="currentTab === 'pending'">
                      <button
                        @click="approve(data)"
                        class="px-3 py-1 text-sm text-white bg-green-500 rounded-md whitespace-nowrap"
                      >
                        通过
                      </button>
                      <button
                        @click="reject(data)"
                        class="px-3 py-1 text-sm text-white bg-red-500 rounded-md whitespace-nowrap"
                      >
                        不通过
                      </button>
                    </template>
                    <button
                      @click="openDetail(data)"
                      class="px-3 py-1 text-sm text-white bg-blue-500 rounded-md whitespace-nowrap"
                    >
                      详情
                    </button>
                    <template v-if="currentTab === 'approved'">
                      <span class="flex items-center gap-1 text-green-600">
                        <i class="iconfont icon-gou1"></i>
                        <i class="fas fa-check-circle"></i>
                        <span class="text-sm">已通过</span>
                      </span>
                    </template>
                    <template v-if="currentTab === 'rejected'">
                      <span class="flex items-center gap-1 text-red-600">
                        <i class="fas fa-times-circle"></i>
                        <i class="iconfont icon-chacha"></i>
                        <span class="text-sm">未通过</span>
                      </span>
                    </template>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center gap-2">
            <div class="relative">
              <div class="px-3 py-1 text-sm border rounded-md !rounded-button whitespace-nowrap flex items-center gap-2">
                共 {{ total }} 条信息
                <i class="fas fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>

          <div class="flex item-center gap-2">
            <el-pagination background v-model:current-page="pageNum" v-model:page-size="pageSize"
              :page-sizes="[5, 10, 15, 20]" layout="sizes, prev, pager, next" :total="total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div
      v-if="showPopup"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg w-800px max-h-90vh flex flex-col">
        <!-- 标题区域 -->
        <div class="flex justify-between items-center p-6 border-b">
          <h2 class="text-2xl font-bold">特殊学生详情</h2>
          <button class="text-gray-500 hover:text-gray-700" @click="closePopup">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto p-6">
          <!-- 项目基本信息 -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-building text-blue-500 mr-2"></i> 学生基本信息
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="flex items-start">
                <span class="text-gray-500 w-24">学生姓名：</span>
                <span class="font-medium">{{ currentInternship.name}}</span>
              </div>
              <div class="flex items-start">
                <span class="text-gray-500 w-24">情况类型：</span>
                <span class="font-medium">{{
                  currentInternship.type
                }}</span>
              </div>
              <div class="flex items-start">
                  <span class="text-gray-500 w-24">严重程度：</span>
                  <span  v-if="currentInternship.severity == 0" class="text-green-600 font-medium">正常</span>
                  <span v-else-if="currentInternship.severity == 1" class="text-yellow-600 font-medium">轻微</span>
                  <span v-else-if="currentInternship.severity == 2" class="text-orange-600 font-medium">中度</span>
                  <span v-else-if="currentInternship.severity == 3" class="text-red-600 font-medium">严重</span>
              </div>
              
            </div>
          </div>
          <!-- 实习成果 -->
          <div>
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fas fa-briefcase text-green-500 mr-2"></i> 证明材料
            </h3>
            <div>
              <img
                  :src="currentInternship.specialImg"
                  alt="项目图片"
                  class="inline-block ml-2 h-28 w-28 object-cover cursor-pointer"
                  @click="openEnlargeModal(currentInternship.specialImg)"
                />
            </div>
          </div>
        </div>
        <!-- 底部操作栏 -->
        <div class="border-t p-6 flex justify-end space-x-4">
          <button
            class="px-4 py-2 bg-blue-600 text-white flex items-center"
            @click="exportPDF"
          >
            <i class="fas fa-file-pdf mr-2"></i> 导出 PDF
          </button>
          <button
            class="px-4 py-2 border border-gray-300 text-gray-700 flex items-center"
            @click="closePopup"
          >
            <i class="fas fa-times mr-2"></i> 关闭
          </button>
        </div>
      </div>
    </div>

    <!-- 放大图片模态框 -->
  <div v-if="showEnlargeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="handleClickOutside">
    <div class="bg-white rounded-lg p-4 max-w-3xl" @click.stop>
      <img :src="enlargeImageUrl" class="w-full max-h-screen object-contain" />
      <button class="absolute top-2 right-2 text-white bg-red-500 p-2 rounded-full" @click="closeEnlargeModal">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { getSpecialReview,specialReview } from "@/api/teacher/specialStudent";
const contentDiv = ref();
const showEnlargeModal = ref(false);
const enlargeImageUrl = ref("");

const pageNum = ref(1);
const pageSize = ref(5);
const total = ref(50); // 数据总量

const currentTab = ref("pending");
const filters = reactive({
  studentName: "",
  company: "",
  dateRange: [],
});

const tabs = [
  { label: "审核中", value: "pending", status: 0 },
  { label: "已通过", value: "approved", status: 1 },
  { label: "未通过", value: "rejected", status: 2 },
];

// 根据状态查询数据
const handleTabClick = (tab) => {
  currentTab.value = tab.value;
  let status = tabs.filter((x) => x.value === tab.value)[0].status;
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    status: status,
    ...filters,
  };
  getSpecial(params);
};

onMounted(() => {
  let status = tabs.filter((x) => x.value === currentTab.value)[0].status;
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    status: status,
    ...filters,
  };
  getSpecial(params);
});

// 分页查询
const handleSizeChange = (val) => {
  pageNum.value = 1; // 切换每页条数时，重置到第一页
  pageSize.value = val;
  let status = tabs.find((x) => x.value === currentTab.value).status;
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    status: status,
  };
  getSpecial(params);
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  let status = tabs.find((x) => x.value === currentTab.value).status;
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    status: status,
  };
  getSpecial(params);
};

const tableHeaders = ["学生姓名", "情况类型", "严重程度", "操作"];

const currentInternship = reactive({
  name: "",
  severity: "",
  specialImg: "",
  status: "",
  type:"",
});

// 获取全部数据
let allSpecial = ref([]);
function getSpecial(data) {
  getSpecialReview(data).then(function (response) {
    console.log("列表数据返回", response);
    allSpecial.value = response.rows;
    total.value = response.total;
  });
}

// 审核通过
const approve = (data) => {
  console.log("通过:", data);
  data.status = 1;
  specialReview(data).then(function (response) {
    let status = tabs.filter((x) => x.value === currentTab.value)[0].status;
    let params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      status: status,
      ...filters,
    };
    getSpecial(params);
  });
};

// 审核不通过
const reject = (data) => {
  console.log("不通过:", data);
  data.status = 2;
  specialReview(data).then(function (response) {
    let status = tabs.filter((x) => x.value === currentTab.value)[0].status;
    let params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      status: status,
      ...filters,
    };
    getSpecial(params);
  });
};

//打开详情弹窗
const openDetail = (data) => {
  currentInternship.name = data.name;
  currentInternship.severity = data.severity;
  currentInternship.specialImg = data.specialImg;
  currentInternship.type = data.type;
  showPopup.value = true;

  // 如果有图片，则设置放大图片的 URL
  if (data.specialImg) {
    enlargeImageUrl.value = data.specialImg;
  }
};
//关闭详情弹窗
const closePopup = () => {
  showPopup.value = false;
};

// 打开放大图片
const openEnlargeModal = (url) => {
  enlargeImageUrl.value = url;
  showEnlargeModal.value = true;
};

// 关闭放大图片
const closeEnlargeModal = () => {
  showEnlargeModal.value = false;
};
const handleClickOutside = (event) => {
  if (!event.target.closest('.bg-white') && showEnlargeModal.value) {
    closeEnlargeModal();
  }
};

const calculateDays = (startDate, endDate) => {
  const start = new Date(startDate).getTime();
  const end = new Date(endDate).getTime();
  return Math.round((end - start) / (1000 * 60 * 60 * 24));
};



const exportPDF = () => {
  // 导出PDF的逻辑
};

const showPopup = ref(false);

const setContentWidth = () => {
  if (contentDiv.value) {
    const windowWidth = window.innerWidth;
    contentDiv.value.style.width = `${windowWidth * 0.75}px`;
    contentDiv.value.style.marginLeft = `${windowWidth * 0.1}px`;
  }
};

onMounted(() => {
  setContentWidth();
  window.addEventListener("resize", setContentWidth);
});
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

th {
  background-color: #f9fafb; /* 对应bg-gray-50颜色 */
}
</style>
